<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/recharge.css"/>
    <title>充值</title>
    <link rel="icon" href="images/common/icon.png" type="image/x-icon"/>
</head>
<body>
<!-- 头部导航开始 -->
<nav class="navbar navbar-default navbar-fixed-top ding" role="navigation">
    <div class="m-hd met">
        <div class="container">
            <div class="container-fluid ">
                <div class="navbar-header ">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand">
                        <div class="logo">
                            <img src="images/common/logo.png" alt=""/>
                        </div>
                    </a>
                </div>
                <div class="collapse navbar-collapse pull-right" id="example-navbar-collapse">
                    <ul class="nav navbar-nav f-fl m-nav js-nav">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="download.html">下载</a></li>
                        <li><a href="recharge.html" style="color:  #ff5300;">充值</a></li>
                        <li><a href="introduction.html">一队简介</a></li>
                        <li><a href="address.html">关于我们</a></li>
                    </ul>
                </div>
                <div class="m-nav-act js-menu-act" style="left: 844.375px; width: 50px; opacity: 0;"></div>
            </div>
        </div>
    </div>
</nav>
<!-- 头部导航结束 -->
<div class="confirm" style="width:100%; height:100%;left:0;top:0; position:fixed;background:rgba(0,0,0,0.3);z-index: 1200;display: none;" >
   <div class="container">
       <div class="confirm_bg">
           <div class="confirm_pay">
               <p>确认支付</p>
               <p>请问是否为ID号码：123456的用户“工号007”充值1甜蜜币</p>
               <div class="cancel_bt">
                   <a>取消</a>
               </div>
               <div class="confirm_bt"  id="confirm_bt" style="background-color: #ff8a00;">
                   <a>确认</a>
               </div>
           </div>
           <div class="QR_code">
               <p>扫码付款</p>
               <p><img src="images/gzh.jpg" style="width: 150px;"></p>
               <p>微信扫一扫</p>
           </div>
       </div>
   </div>
</div>
<div class="ht_1">
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <p class="m_in">请输入您要充值的ID</p>
                    <input type="text" style="line-height: 25px;width: 350px;"><br/>
                </div>
                <div class="col-md-9"></div>
            </div>
            <div class="row row_choose">
                <p>请选择您要充值的金额</p>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">1甜蜜币</p>
                        <p class="pay_rmb">1元</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">5甜蜜币</p>
                        <p class="pay_rmb">5元</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">20甜蜜币</p>
                        <p class="pay_rmb">20元</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">50甜蜜币</p>
                        <p class="pay_rmb">50元</p>
                    </div>
                </div>
            </div>
            <div class="row row_choose row2">
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">100甜蜜币</p>
                        <p class="pay_rmb">100元</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">300甜蜜币</p>
                        <p class="pay_rmb">300元</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">500甜蜜币</p>
                        <p class="pay_rmb">500元</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">1000甜蜜币</p>
                        <p class="pay_rmb">1000元</p>
                    </div>
                </div>
            </div>
            <div class="row row_choose row3">
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">2000甜蜜币</p>
                        <p class="pay_rmb">2000元</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">5000甜蜜币</p>
                        <p class="pay_rmb">5000元</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">10000甜蜜币</p>
                        <p class="pay_rmb">10000元</p>
                    </div>
                </div>
                <div class="col-md-3"></div>
            </div>
            <div class="row row4">
                <p>请选择支付方式</p>
                <div class="col-md-3">
                    <div class="choose_pay text-center">
                        <img src="images/recharge/weixin.png" class="pay_icon1">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="choose_pay text-center">
                        <img src="images/recharge/zhifubao.png" class="pay_icon2">
                    </div>
                </div>
                <div class="col-md-3"></div>
                <div class="col-md-3"></div>
            </div>
            <div class="row row5">
                <div class="col-md-6">
                    <button class="button">下一步</button>
                </div>
                <div class="col-md-6"></div>
            </div>
        </div>
    </div>
</div>
<!--宽度768-991---------------------------------------------------->
<div class="ht_2">
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <p class="m_in">请输入您要充值的ID</p>
                    <input type="text" style="line-height: 25px;width: 350px;"><br/>
                </div>
                <div class="col-sm-9"></div>
            </div>
            <div class="row row_choose">
                <p>请选择您要充值的金额</p>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">1甜蜜币</p>
                        <p class="pay_rmb">1元</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">5甜蜜币</p>
                        <p class="pay_rmb">5元</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">20甜蜜币</p>
                        <p class="pay_rmb">20元</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">50甜蜜币</p>
                        <p class="pay_rmb">50元</p>
                    </div>
                </div>
            </div>
            <div class="row row_choose row2">
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">100甜蜜币</p>
                        <p class="pay_rmb">100元</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">300甜蜜币</p>
                        <p class="pay_rmb">300元</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">500甜蜜币</p>
                        <p class="pay_rmb">500元</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">1000甜蜜币</p>
                        <p class="pay_rmb">1000元</p>
                    </div>
                </div>
            </div>
            <div class="row row_choose row3">
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">2000甜蜜币</p>
                        <p class="pay_rmb">2000元</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">5000甜蜜币</p>
                        <p class="pay_rmb">5000元</p>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="m_pay text-center">
                        <p class="pay_bi">10000甜蜜币</p>
                        <p class="pay_rmb">10000元</p>
                    </div>
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="row row4">
                <p>请选择支付方式</p>
                <div class="col-sm-3">
                    <div class="choose_pay text-center">
                        <img src="images/recharge/weixin.png" class="pay_icon1">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="choose_pay text-center">
                        <img src="images/recharge/zhifubao.png" class="pay_icon2">
                    </div>
                </div>
                <div class="col-sm-3"></div>
                <div class="col-sm-3"></div>
            </div>
            <div class="row row5">
                <div class="col-sm-6">
                    <button class="button">下一步</button>
                </div>
                <div class="col-sm-6"></div>
            </div>
        </div>
    </div>
</div>
<!--宽度小于768--------------------------------------------------------->
<div class="ht_3">
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-xs-10">
                    <p class="m_in">请输入您要充值的ID</p>
                    <input type="text"><br/>
                </div>
                <div class="col-xs-2"></div>
            </div>
            <div class="row row_choose">
                <p>请选择您要充值的金额</p>
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">1甜蜜币</p>
                        <p class="pay_rmb">1元</p>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">5甜蜜币</p>
                        <p class="pay_rmb">5元</p>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">20甜蜜币</p>
                        <p class="pay_rmb">20元</p>
                    </div>
                </div>
            </div>
            <div class="row row_choose row2">
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">50甜蜜币</p>
                        <p class="pay_rmb">50元</p>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">100甜蜜币</p>
                        <p class="pay_rmb">100元</p>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">300甜蜜币</p>
                        <p class="pay_rmb">300元</p>
                    </div>
                </div>
            </div>
            <div class="row row_choose row3">
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">500甜蜜币</p>
                        <p class="pay_rmb">500元</p>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">1000甜蜜币</p>
                        <p class="pay_rmb">1000元</p>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">2000甜蜜币</p>
                        <p class="pay_rmb">2000元</p>
                    </div>
                </div>
            </div>
            <div class="row row_choose row2">
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">5000甜蜜币</p>
                        <p class="pay_rmb">5000元</p>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="m_pay text-center">
                        <p class="pay_bi">10000甜蜜币</p>
                        <p class="pay_rmb">10000元</p>
                    </div>
                </div>
            </div>
            <div class="row row4">
                <p>请选择支付方式</p>
                <div class="col-xs-5">
                    <div class="choose_pay text-center">
                        <img src="images/recharge/weixin.png" class="pay_icon1">
                    </div>
                </div>
                <div class="col-xs-5">
                    <div class="choose_pay text-center">
                        <img src="images/recharge/zhifubao.png" class="pay_icon2">
                    </div>
                </div>
                <div class="col-xs-2"></div>
            </div>
            <div class="row row5">
                <div class="col-xs-6">
                    <button class="button">下一步</button>
                </div>
                <div class="col-xs-6"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/recharge.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
    $(function(){       //点击弹出支付框
        $(".button").click(function(){  //点击显示支付框
            $(".confirm").show();
            $(".confirm_pay").show();
        })
        $(".cancel_bt").click(function(){  //点击隐藏支付框
            $(".confirm").hide();
            $(".confirm_pay").hide();
        })
        $("#confirm_bt").click(function(){  //点击确认显示二维码
            event.stopPropagation();
            $(".confirm").show();
            $(".QR_code").show();
        })
        $(".confirm").click(function(){   //点击灰色div隐藏支付页面
            $(".confirm").hide();
            $(".QR_code").hide();
            $(".confirm_pay").hide();
        })

        //点击div 显示选中效果
        $(".m_pay").click(function(){
           $(".m_pay").removeClass('m_pay_2');
            $(".m_pay img").remove();
            $(this).addClass('m_pay_2');
            $(this ).find(" .pay_rmb").after(" <img src='images/recharge/choose.png' class='choose_img'>");
        });

        // 支付方式变更
        $(".choose_pay").click(function(){
            $(".choose_pay").removeClass('m_pay_2');
            $(".choose_pay .choose_img").remove();
        /*    $(this).find(".choose_pay").addClass('m_pay_2');*/
           $(this).addClass('m_pay_2');
            $(this ).find(".pay_icon1,.pay_icon2").after(" <img src='images/recharge/choose.png' class='choose_img'>");
        });
    })


</script>
</body>
</html>